<template>
  <div class="candy">
    <div class="candyBox">
      <!-- banner -->
      <div class="candyBanner">
        <div class="bannerImg">
          <!-- <img v-if="$store.state.app.language === 'zh-CN'" src="../../../assets/img/activity/candyBox/banner-cn.png" alt="">
          <img v-else-if="$store.state.app.language === 'zh-TW'" src="../../../assets/img/activity/candyBox/banner-tw.png" alt="">
          <img v-else-if="$store.state.app.language === 'ko'" src="../../../assets/img/activity/candyBox/banner-ko.png" alt="">
          <img v-else src="../../../assets/img/activity/candyBox/banner-en.png" alt=""> -->
          <banner :type="2"/>
        </div>
        <div class="mortgageNum flexb">
          <div class="info flex">
            <div class="account flexc" v-if="$store.state.app.scatter.identity">
              <span class="member" @click="$router.push('/member')">
                <!-- 是会员 -->
                <img v-if="user && user.level"
                :src="handleGetVipLogo()" alt="" width="19" height="17"
                style="margin: 0 7px -3px 0; cursor: pointer;">
                <!-- 非会员 -->
                <i v-else class="iconfont icon-v gray mr" style="font-size: 18px; cursor: pointer;"></i>
              </span>
              <span>{{ $store.state.app.scatter.identity.accounts[0].name }}</span>
              <div class="line"></div>
            </div>
            <div v-else class="noLogin">
              <div class="line"></div>
              {{ $t('candyBox.noLogin') }}
            </div>
            <!-- <div class="mortgageList pl">
              {{ $t('candyBox.youStake') }}:
              <span v-if="$store.state.app.scatter.identity && $store.state.app.scatter.chain === 'eos'">
                {{ toFixed(myStakeNdxALL, 4) }}
              </span>
              <span v-else style="color: #333;">——</span>
              NDX
            </div> -->
            <div class="mortgageList pl">
              {{ $t('candyBox.yourAirdropWeight') }}:
              <span v-if="$store.state.app.scatter.identity && $store.state.app.scatter.chain === 'eos'">
                {{ user && user.weight || 0 }}
              </span>
              <span v-else style="color: #333;">——</span>
            </div>
            <!-- <div class="mortgageList pl">
              {{ $t('candyBox.totalStake') }}:
              <span v-if="$store.state.app.scatter.identity && $store.state.app.scatter.chain === 'eos'">
                {{ parseFloat(totalStaked).toFixed(4) }}
              </span>
              <span v-else style="color: #333;">——</span>
              NDX
            </div> -->
            <!-- 空投占比 -->
            <div class="mortgageList pl">
              {{ $t('candyBox.airdropProportion') }}:
              <span v-if="$store.state.app.scatter.identity && $store.state.app.scatter.chain === 'eos'">
                {{ user && toFixed(accMul(user.weightRatio, 100), 4) || 0.0000 }}%
              </span>
              <span v-else style="color: #333;">——</span>
              <span style="cursor: pointer;" class="ml" @click="airdropRulesVisible = true;">{{ $t('candyBox.airdropRules') }} ></span>
            </div>
            <!-- <div class="mortgageList pl">
              {{ $t('candyBox.stakeProportion') }}:
              <span v-if="$store.state.app.scatter.identity && $store.state.app.scatter.chain === 'eos'">
                {{ totalStaked ? ((parseFloat(user && user.ndxStaked) / parseFloat(totalStaked)) * 100).toFixed(4) : '0.0000' }}%
              </span>
              <span v-else style="color: #333;">——</span>
            </div> -->
          </div>
          <div class="quickMortgage">
            <!-- <span v-if="$store.state.app.scatter.identity" @click="handleMortgageNdxShow(1)"> -->
            <span v-if="$store.state.app.scatter.identity" @click="handleRenew(0)">
              <i class="iconfont icon-kuaisudiya"></i>{{ $t('ndxStake.tipsLv') }}</span>
            <span class="loginBtn" v-else @click="handleWalletPermission">{{ $t('nav.login') }}</span>
          </div>
        </div>
      </div>
      <!-- 空投列表 -->
      <div class="airdropList">
        <ul class="clearfix" v-if="doingList.length > 0">
          <li class="fl flex"
            v-for="(item, index) in doingList"
            :key="index"
            @click="handleLookDetails(item, index, 'youToGain')"
            :class="handleClass(index)">
            <span class="hot">
              {{ $t('candyBox.period', {number: item.period}) }}
            </span>
            <div class="imgList flexc">
              <img :src="item.imageUrl" alt="">
            </div>
            <div class="listCont" :style="!$store.state.app.scatter.identity || $store.state.app.scatter.chain !== 'eos' ? 'flex: 4.3' : ''">
              <p>{{ item.code }} <i class="iconfont icon-huo" v-if="item.isHot"></i></p>
              <p class="fn-text2"
                style="-webkit-box-orient: vertical;"
                :style="$store.state.app.language === 'en' || $store.state.app.language === 'ko' ? 'height: 28px;' : ''">{{ item.introduction }}</p>
              <p>{{ $t('candyBox.airdropAmount') }}：<span>{{ moneyFormat(item.airdropCount) }}</span> {{ item.code }}</p>
              <p>{{ $t('candyBox.snapshotTime') }}：{{ `${item.snapshotTime.slice(0, 11)} 00:00` }}(UTC)</p>
            </div>
            <div class="listNumber" v-if="$store.state.app.scatter.identity && $store.state.app.scatter.chain === 'eos'">
              <p>{{ $t('candyBox.youToGain') }}</p>
              <p>{{ item.expectCount.toFixed(item.coinDecimal) }}</p>
              <p>{{ item.code }}</p>
            </div>
          </li>
          <li v-if="doingListLength && doingListLength % 2 === 1" class="evenData fl">
            <div class="flexc">
              <img src="../../../assets/img/activity/candyBox/noData.png" alt="">
            </div>
            <p class="center" style="color: #999;">{{ $t('candyBox.moreCandies') }}</p>
          </li>
        </ul>
        <div v-else class="candy-noData">
          <div class="flexc">
            <img src="../../../assets/img/activity/candyBox/noData.png" alt="">
          </div>
          <p class="center" style="color: #999;">{{ $t('candyBox.moreCandies') }}</p>
        </div>
      </div>
      <!-- 上架糖果 -->
      <div class="upperCandy flexc" @click="handleApplyCandy">
        <img v-if="$store.state.app.language === 'zh-CN'" src="../../../assets/img/activity/candyBox/btn-cn.png?v=1.0" alt="">
        <img v-else-if="$store.state.app.language === 'zh-TW'" src="../../../assets/img/activity/candyBox/btn-tw.png?v=1.0" alt="">
        <img v-else-if="$store.state.app.language === 'ko'" src="../../../assets/img/activity/candyBox/btn-ko.png?v=1.0" alt="">
        <img v-else src="../../../assets/img/activity/candyBox/btn-en.png?v=1.0" alt="">
      </div>
      <!-- 历史空投 -->
      <div class="historyAirdrop">
        <div class="caption flexb">
          <span style="font-size: 16px;">{{ $t('candyBox.airdropHistory') }}</span>
          <el-checkbox
            v-model="hideOthers"
            @change="handleHideHistoryList"
            v-if="$store.state.app.scatter.identity && $store.state.app.scatter.chain === 'eos'">
            {{ $t('candyBox.onlyShowGain') }}
          </el-checkbox>
        </div>
        <div class="airdropList">
          <ul class="clearfix" v-if="candyHistoryList.length > 0">
            <li class="fl flex"
              v-for="(item, index) in candyHistoryList"
              :key="index"
              @click="handleLookDetails(item, index, 'gained')"
              :class="handleClass(index)">
              <span class="hot">
                {{ $t('candyBox.period', {number: item.period || 1}) }}
              </span>
              <div class="imgList flexc">
                <img :src="item.imageUrl" alt="">
              </div>
              <div class="listCont" :style="!$store.state.app.scatter.identity || $store.state.app.scatter.chain !== 'eos' ? 'flex: 4.3' : ''">
                <p>{{ item.code }}</p>
                <p class="fn-text2"
                  style="-webkit-box-orient: vertical;"
                  :style="$store.state.app.language === 'en' || $store.state.app.language === 'ko' ? 'height: 28px;' : ''">{{ item.introduction }}</p>
                <p>{{ $t('candyBox.airdropAmount') }}：{{ moneyFormat(item.airdropCount) }} {{ item.code }}</p>
                <p>{{ $t('candyBox.airdropTime') }}：{{ item.airdropTime | dateFormat }}</p>
              </div>
              <div class="listNumber" v-if="$store.state.app.scatter.identity && $store.state.app.scatter.chain === 'eos'">
                <p>{{ $t('candyBox.gained') }}</p>
                <p>{{ item.expectCount.toFixed(item.coinDecimal) }}</p>
                <p>{{ item.code }}</p>
              </div>
            </li>
            <div class="center colorThis lookMore" @click="handleMoreData" v-if="lookMoreBtn">{{ $t('index.Tomore') }}</div>
          </ul>
          <div v-else class="candy-noData">
            <!-- <div class="flexc">
              <img src="../../../assets/img/activity/candyBox/noData.png" alt="">
            </div> -->
            <p class="center" style="margin-top: 100px; color: #999;">{{ $t('myWallet.noData') }}</p>
          </div>
        </div>
      </div>
      <!-- 详情弹窗 -->
      <div>
        <details-layer
          v-if="hideDetailsLayer"
          :candyDetails="candyDetails"
          @listenCloseDetails="listenCloseDetails"
          @listenToUpgrade="handleToUpgrade"/>
      </div>
      <!-- 赎回抵押弹窗 -->
      <el-dialog
        class="mortgageNdx"
        :visible.sync="mortgageNdxVisible"
        :close-on-click-modal="false"
        width="440px"
        center>
        <mortgage-ndx
        @listenStakeAction = "listenStakeAction"
        :mortgageNdxVisible = "mortgageNdxVisible"
        :MortgageStatus="MortgageStatus"/>
      </el-dialog>
      <!-- 空投规则 -->
      <el-dialog
        class="airdropRules"
        :visible.sync="airdropRulesVisible"
        :close-on-click-modal="false"
        width="700px"
        center>
        <airdrop-rules :ruleList="ruleList"/>
      </el-dialog>
      <!-- 更换弹窗 -->
      <el-dialog
        class="mortgageNdx"
        :visible.sync="upgradeModeHide"
        width="440px"
        center
        :close-on-click-modal="false">
        <upgrade-mode
        :vipMode="vipMode"
        :user="user"
        :myStakeNdxALL="myStakeNdxALL"
        :selfStaked="selfStaked"
        :upgradeModeHide = "upgradeModeHide"
        @listenUpgradeMode = "listenUpgradeMode"/>
      </el-dialog>
      <!-- 续费升级弹窗 -->
      <el-dialog
        class="mortgageNdx"
        :visible.sync="renewHide"
        width="600px"
        center
        :close-on-click-modal="false">
        <renew
        :typeStatus = "typeStatus"
        :vipMode="vipModeFormat"
        :selfAccountInfo="user"
        :myStakeNdxALL="myStakeNdxALL"
        :renewHide="renewHide"
        @listenRenew="handleListenRenew"/>
      </el-dialog>
      <a href="" class="hidden" target="_blank" ref="target"></a>
    </div>
  </div>
</template>

<script>

import DetailsLayer from '@/views/activity/candyBox/components/DetailsLayer';
import MortgageNdx from '@/views/myWallet/member/components/MortgageNdx'; // 赎回抵押弹窗
import AirdropRules from '@/views/activity/candyBox/components/AirdropRules'; // 空投规则
import Renew from '@/views/myWallet/member/privilege/renew'; // 已续费弹窗
import UpgradeMode from '@/views/myWallet/member/privilege/upgradeMode'; // 消耗抵押升级更换弹窗
import { vipLogo } from '@/utils/wallet';
import { EosModel } from '@/utils/eos';
import { toFixed, accMul, moneyFormat } from '@/utils/validate';
import Banner from '@/components/Banner'; // banner

export default {
  name: 'candyBox', // 糖果盒子
  data() {
    return {
      doingList: [], // 正在空投数据
      candyHistoryList: [], // 历史空投数据
      hideOthers: false, // 只显示已获得历史空投数据
      candyDetails: {}, // 详情数据
      hideDetailsLayer: false, // 是否显示详情弹窗
      mortgageNdxVisible: false, // 抵押显示值
      airdropRulesVisible: false, // 空投规则显示值
      MortgageStatus: 0, // 1:抵押 2:赎回
      user: {}, // 个人信息
      totalStaked: null, // 全网抵押总量
      doingListLength: 0, // 正在空投数据个数
      myStakeNdxALL: 0, // 当前账户的抵押总数
      selfStaked: 0, // 个人抵押总数
      ruleList: [], // 空投规则
      vipMode: 1, // 1-抵押等级 0-消耗等级
      vipModeFormat: 1, // 1-抵押等级 0-消耗等级
      renewHide: false, // 续费升级弹窗
      typeStatus: 1, // 升级、续费 0-升级 1-续费
      upgradeModeHide: false, // 消耗抵押升级更换弹窗值
      currPage: 1, // 页数
      lookMoreBtn: false, // 查看更多按钮
    }
  },
  components: {
    DetailsLayer,
    MortgageNdx,
    Banner,
    AirdropRules,
    Renew, // 续费升级弹窗
    UpgradeMode
  },
  props: {},
  watch: {
    '$store.state.app.language': function change() {
      this.handleGetListData();
      // this.candyHistoryList = [];
      // this.currPage = 1;
      // this.handleGetHistoryList(0);
    },
    '$store.state.app.scatter.identity': {
      handler: function listen() {
        this.handleGetListData();
        this.handleGetHistoryList(0);
        this.handleGetStakexInfo('stat');
        // 当前账户的抵押总数
        if (this.$store.state.app.scatter.chain === 'eos') {
          this.handleGetMyStakexNumber();
        }
      },
      deep: true,
    },
    // 监听账户等级变化
    '$store.state.app.accountInfo': function change(val) {
      this.user = val;
      this.vipMode = this.user.vipMode;
      this.vipModeFormat = this.user.vipMode;
    },
    hideOthers: function change() {
      this.candyHistoryList = [];
      this.currPage = 1;
      this.handleHideHistoryList();
    }
  },
  computed: {},
  created() {
    document.title = this.$t(`rout.${this.$route.meta.title}`);
  },
  mounted() {
    this.user = this.$store.state.app.accountInfo;
    this.vipMode = this.user && this.user.vipMode;
    this.vipModeFormat = this.user && this.user.vipMode;
    this.handleLevelRule();
    // 获取糖果盒子列表
    this.handleGetListData();
    // 获取糖果历史列表
    this.handleGetHistoryList(0);
    // 获取抵押数量
    this.handleGetStakexInfo('stat');
    // 当前账户的抵押总数
    if (this.$store.state.app.scatter.chain === 'eos') {
      this.handleGetMyStakexNumber();
    }
  },
  beforeDestroy() {},
  methods: {
    // 获取等级说明
    handleLevelRule() {
      this.$http.get('/levelRule/list').then((res) => {
        if (res.code !== 0) return;
        if (res.code === 0) {
          const ruleList = res.ruleList.map(v => v.weight);
          ruleList.shift();
          this.ruleList = ruleList;
        }
      });
    },
    handleClass(index) {
      if (index % 4 === 0) {
        return 'back0';
      }

      if (index % 4 === 1) {
        return 'back1';
      }

      if (index % 4 === 2) {
        return 'back2';
      }

      return 'back3';
    },
    // 1:抵押 2:赎回
    handleMortgageNdxShow(val) {
      // 非EOS账户暂不支持开通会员
      // const chain = this.$store.state.app.scatter.chain;
      // if (chain !== 'eos') {
      //   this.$message({
      //     message: `${chain}${this.$t('bosChain.bosTip')}`,
      //     type: 'warning'
      //   });
      //   return;
      // }
      if (val === 1) {
        this.MortgageStatus = 1;
      }
      if (val === 2) {
        this.MortgageStatus = 2;
      }
      this.mortgageNdxVisible = true;
    },
    // 获取总抵押数
    handleGetStakexInfo(name) {
      const params = {
        name,
        actor: 'NDX'
      }
      EosModel.newdexStakexInfo(params, (res) => {
        if (res.rows) {
          this.totalStaked = res.rows[0] ? res.rows[0].total_staked : 0;
        }
      });
    },
    // NDX抵押数stake
    handleGetMyStakexNumber() {
      const params = {
        name: 'stake',
        actor: 'account',
        chain: 'eos'
      }
      EosModel.newdexStakexInfo(params, (res) => {
        if (res && res.rows && res.rows.length > 0) {
          this.myStakeNdxALL = (Number(res.rows[0].staked_to_others) + Number(res.rows[0].self_staked)) / 10000;
          this.selfStaked = Number(res.rows[0].self_staked) / 10000;
        }
      });
    },
    // 获取正在空投列表
    handleGetListData() {
      this.$http.get('/candy/currentAirdrop').then((res) => {
        if (res.code !== 0) {
          return;
        }
        this.doingList = res.candyList;
        this.doingListLength = res.candyList.length;
      });
    },
    // 获取历史空投列表
    handleGetHistoryList(own) {
      const params = {
        own,
        currPage: this.currPage,
        pageSize: 10
      };
      this.$http.get('/candy/historyAirdrop', { params }).then((res) => {
        if (res.code !== 0) {
          return;
        }
        this.candyHistoryList = res.candyList;
        if (res.candyList.length >= 10) {
          this.lookMoreBtn = true;
        } else {
          this.lookMoreBtn = false;
        }
      });
    },
    // 只显示已获得历史空投列表
    handleHideHistoryList() {
      const own = this.hideOthers ? 1 : 0;
      this.handleGetHistoryList(own);
    },
    // 查看更多
    handleMoreData() {
      this.currPage += 1;
      const own = this.hideOthers ? 1 : 0;
      const params = {
        own,
        currPage: this.currPage,
        pageSize: 10
      };
      this.$http.get('/candy/historyAirdrop', { params }).then((res) => {
        if (res.code !== 0) {
          return;
        }
        // this.candyHistoryList = res.candyList;
        this.candyHistoryList.push(...res.candyList);
        if (res.candyList.length >= 10) {
          this.lookMoreBtn = true;
        } else if (res.candyList.length === 0) {
          this.$message({
            message: this.$t('myWallet.noData'),
            type: 'warning'
          });
          this.lookMoreBtn = false;
        } else {
          this.lookMoreBtn = false;
        }
      });
    },
    // 查看详情
    handleLookDetails(item, index, type) {
      this.hideDetailsLayer = true;
      this.candyDetails = item;
      this.candyDetails.index = index;
      this.candyDetails.type = type;
    },
    // 关闭糖果详情
    listenCloseDetails() {
      this.hideDetailsLayer = false;
    },
    // 关闭抵押弹窗
    listenStakeAction(val) {
      if (val === 'close') {
        this.mortgageNdxVisible = false;
        this.handleGetStakexInfo('stat');
      }
    },
    // 选择升级方式回调
    listenUpgradeMode(key) {
      this.upgradeModeHide = false;
      if (key === 'sure') {
        this.vipMode = this.vipMode === 1 ? 0 : 1;
        this.vipModeFormat = this.vipModeFormat === 1 ? 0 : 1;
      }
    },
    // 续费升级
    handleRenew(typeStatus) {
      // 非EOS账户暂不支持开通会员
      const chain = this.$store.state.app.scatter.chain;
      if (chain !== 'eos') {
        this.$message({
          message: `${chain}${this.$t('bosChain.bosTip')}`,
          type: 'warning'
        });
        return;
      }
      this.typeStatus = typeStatus;
      this.renewHide = true;
    },
    // 续费升级回调
    handleListenRenew(key) {
      if (key !== 'updateUpgrade') {
        this.renewHide = false;
      }
      this.vipModeFormat = this.vipMode;
      if (key === 'upgradeMode-show') {
        this.renewHide = false;
        this.upgradeModeHide = true;
      }
      if (key === 'updateUpgrade') {
        // 为其他账户续费会员特权Tab页面，他人账户的等级为V0时，跳转升级窗口
        this.typeStatus = 0;
      }
      setTimeout(() => {
        this.handleGetListData();
      }, 3000);
    },
    // 详情回调
    handleToUpgrade(typeStatus) {
      // 非EOS账户暂不支持开通会员
      const chain = this.$store.state.app.scatter.chain;
      if (chain !== 'eos') {
        this.$message({
          message: `${chain}${this.$t('bosChain.bosTip')}`,
          type: 'warning'
        });
        return;
      }
      this.hideDetailsLayer = false;
      this.typeStatus = typeStatus;
      this.renewHide = true;
    },
    // 登录授权
    handleWalletPermission() {
      const checkWallet = localStorage.getItem('checkWallet');
      if (!Number(checkWallet)) {
        this.$emit('listenWalletPermission', true);
        return;
      }
      this.$emit('listenWalletLogin', true);
    },
    // 获取VIP - Logo
    handleGetVipLogo() {
      return vipLogo()
    },
    // 上架
    handleApplyCandy() {
      const chain = this.$store.state.app.scatter.chain;
      if (chain !== 'eos') {
        this.$message({
          message: `${chain}${this.$t('candyBox.noSupport')}`,
          type: 'warning'
        });
        return;
      }
      // 重新打开一个页面 - 申请页
      const target = this.$refs.target;
      const origin = window.location.origin
      target.setAttribute('href', `${origin}/apply?type=2`);
      target.click();
    },
    // 千分位
    moneyFormat(fmoney) {
      return moneyFormat(fmoney);
    },
    toFixed(num, p) {
      return toFixed(num, p);
    },
    // 两数相乘
    accMul(num1, num2) {
      return accMul(num1, num2)
    },
  },
}
</script>
<style lang="scss" scoped>
.candy {
  // background-color: rgb(249, 249, 249);
}
.back0 {
  background: linear-gradient(to right, #426DFF, #3D9EFF) !important;
}

.back1 {
  background: linear-gradient(to right, #F76B1C, #FF9F34) !important;
}

.back2 {
  background: linear-gradient(to right, #8007F9, #A54CFF) !important;
}

.back3 {
  background: linear-gradient(to right, #FF0A48, #FF143E) !important;
}
.candyBox{
  // background: #fff;
  width: 1260px;
  margin: auto;
  padding-top: 20px;
  min-height: 1175px;

  .candyBanner {
     box-shadow: 0 0 -50px -20px rgba(0, 0, 0, 0.1);

    .bannerImg {
      height: 352px;
      padding-top: 50px;

      img {
        display: block;
        overflow: hidden;
        width: 100%;
        height: 100%;
      }
    }
    .info {
      flex: 8;
      & > div {
        flex: 1;
      }
    }

    .quickMortgage {
      display: flex;
      flex-direction:row-reverse;
      color: #6075f4;

      span {
        cursor: pointer;
      }

      i {
        display: inline-block;
        font-size: 25px;
        vertical-align: middle;
      }

      .loginBtn {
        line-height: 30px;
        padding: 0 30px;
        border: 1px solid #278EDA;
        color: #278EDA;
        border-radius: 5px;
      }
    }

    .mortgageNum {
      height: 65px;
      line-height: 65px;
      background: #fff;
      padding: 0 50px 0 0;

      .account {
        position: relative;
        padding: 0 20px;
        font-size: 18px;

        .line {
          position: absolute;
          right: 20px;
          top: 50%;
          width: 2px;
          height: 30px;
          background: rgb(229, 233, 241);
          transform: translateY(-50%);
        }
      }

      .noLogin {
        position: relative;
        padding-left: 30px;
        flex: 0.5;

        .line {
          position: absolute;
          right: 20px;
          top: 50%;
          width: 2px;
          height: 30px;
          background: rgb(229, 233, 241);
          transform: translateY(-50%);
        }
      }

      .mortgageList {
        span {
          color: #6075f4;
        }
      }

      .mortgageList:last-child {
        flex: 1.8;
      }
    }

    .quickMortgage {
      flex: 1;
    }
  }

  .airdropList {
    margin-top: 20px;

    .candy-noData {
      padding: 20px 0;
      img {
        display: inline-block;
        width: 200px;
      }
    }

    .evenData {
      background: #fff;
      cursor: auto !important;
      // padding-left: 25%;
      // margin-left: -100px;
      img {
        display: inline-block;
        width: 150px;
        margin-top: -20px;
      }
    }

    ul {
      li {
        position: relative;
        width: 49%;
        height: 170px;
        border-radius: 10px;
        padding: 20px;
        color: #fff;
        background: linear-gradient(to right, #ff9100 , #ffb700);
        margin-right: 2%;
        margin-bottom: 20px;
        cursor: pointer;

        .hot {
          position: absolute;
          top: 8px;
          left: -6px;
          color: #fff;
          width: 71px;
          height: 28px;
          background: url('../../../assets/img/activity/candyBox/redBack.png') no-repeat;
          background-size: 100% 100%;
          text-align: center;
          line-height: 26px;
        }

        .imgList {
          flex: 1;
          // width: 109px;
          height: 98px;
          border-radius: 50%;
          background: #fff;
          margin-right: 30px;
          img {
            display: inline-block;
            width: 75px;
            overflow: hidden;
            vertical-align: middle;
          }
        }

        .listCont {
          flex: 3;
          padding-right: 20px;

          p:nth-child(1) {
            font-size: 22px;
            margin-bottom: 10px;
          }

          p:nth-child(2) {
            margin-bottom: 12px;
            font-size: 12px;
            height: 33px;
          }

          i {
            color: #FFEE1D;
            font-size: 20px;
            margin-left: 5px;
          }
        }

        .listNumber {
          flex: 1.2;
          padding: 20px 0 20px 20px;
          text-align: center;
          border-left: 1px dashed #fff;

          p:nth-child(1) {
            font-size: 14px;
          }

          p:nth-child(2) {
            font-size: 20px;
            margin: 10px 0 5px;
          }

          p:nth-child(3) {
            font-size: 18px;
          }
        }
      }

      li:nth-child(2n) {
        margin-right: 0;
        // background: linear-gradient(to right, #ff4705 , #ff6d43);
      }

      // li:nth-child(3n) {
      //   background: linear-gradient(to right, #5867f5 , #50b2fe);
      // }

      // li:nth-child(4n) {
      //   background: linear-gradient(to right, #6f3ef5 , #667afe);
      // }
    }
  }

  .upperCandy {
    height: 80px;
    margin: 0 auto 20px;

    img {
      display: block;
      width: 1260px;
      cursor: pointer;
    }
  }

  .historyAirdrop {
    .caption {
      padding: 10px;
    }
  }
}

.lookMore {
  font-size: 16px;
  margin: 10px 0 25px;
  cursor: pointer;
}

.airdropRules {
  /deep/ .el-dialog__body {
    padding-top: 0;
  }
}

.theme-1B1D27 {
  .candy-noData {
    background: #f5f7fa !important;
  }
}
</style>
